<template>
  <div class="app-container">
    <h1>UserChoose</h1>
    <el-form :model="userChoose" label-width="150px" :label-position="labelPosition">
      <el-row>
        <el-radio-group v-model="timeRadio">
          <el-col :span="8">
            <el-tooltip class="item" effect="dark" content="时间类型,LocalDateTime Date Timestamp三选一" placement="top-start">
              <el-form-item label="使用LocalDateTime">
                <el-radio :label="0" @change="radioChange(0)">{{localText}}</el-radio>
              </el-form-item>
            </el-tooltip>
          </el-col>
          <el-col :span="8">
            <el-tooltip class="item" effect="dark" content="时间类型,LocalDateTime Date Timestamp三选一" placement="top-start">
              <el-form-item label="使用Date">
                <el-radio :label="1" @change="radioChange(1)">{{dateText}}</el-radio>
              </el-form-item>
            </el-tooltip>
          </el-col>
          <el-col :span="8">
            <el-tooltip class="item" effect="dark" content="时间类型,LocalDateTime Date Timestamp三选一" placement="top-start">
              <el-form-item label="使用Timestamp">
                <el-radio :label="2" @change="radioChange(2)">{{timeText}}</el-radio>
              </el-form-item>
            </el-tooltip>
          </el-col>
        </el-radio-group>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-tooltip class="item" effect="dark" content="使用BigDecimal代替Double类型" placement="top-start">
            <el-form-item label="使用BigDecimal" >
              <el-switch
                v-model="userChoose.enableBigDecimal"
                active-color="#13ce66"
                inactive-color="#ff4949"
              />
            </el-form-item>
          </el-tooltip>
        </el-col>
        <el-col :span="8">
          <el-tooltip class="item" effect="dark" content="使用Lombok生成get set方法" placement="top-start">
            <el-form-item label="使用Lombok">
              <el-switch
                v-model="userChoose.enableLombok"
                active-color="#13ce66"
                inactive-color="#ff4949"
              />
            </el-form-item>
          </el-tooltip>
        </el-col>
        <el-col :span="8">
          <el-tooltip class="item" effect="dark" content="是否生成导入导出代码" placement="top-start">
            <el-form-item label="导入导出">
              <el-switch
                v-model="userChoose.enableIO"
                active-color="#13ce66"
                inactive-color="#ff4949"
              />
            </el-form-item>
          </el-tooltip>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-tooltip class="item" effect="dark" content="使用EasyExcel生成excel相关代码,否则就是用作者自定义Poi注解，建议使用easyexcel，poi自定义注解时间类型存在解析错误" placement="top-start">
            <el-form-item label="使用EasyExcel">
              <el-switch
                v-model="userChoose.enableEasyExcel"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :disabled="!userChoose.enableIO"
              />
            </el-form-item>
          </el-tooltip>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
  export default {
    name:'UserChoose',
    data(){
      return {
        userChoose: {
          enableLocalDateTime:true,
          enableDate:false,
          enableTimestamp:false,
          enableBigDecimal:true,
          enableLombok:true,
          enableEasyExcel:true,
          enableIO:true
        },
        timeRadio:0,
        localText:'启用',
        dateText:'未启用',
        timeText:'未启用',
        labelPosition:'left',
      }
    },
    methods: {
      radioChange(val) {
        this.userChoose.enableLocalDateTime = val == 0
        this.userChoose.enableDate = val == 1
        this.userChoose.enableTimestamp = val == 2

        this.localText = val == 0 ? '启用' : '未启用'
        this.dateText = val == 1 ? '启用' : '未启用'
        this.timeText = val == 2 ? '启用' : '未启用'
        console.log(this.userChoose)
      }
    }
  }
</script>
<style>
  .el-radio-group{
    width: 100%;
  }
</style>
